<template>
  <div class="box">
    <div class="left">
      <!-- <img src="@/assets/login-bg-e4ea539c.svg" alt=""> -->
    </div>
    <div class="right">
      <div class="f">
        <el-row>
          <el-col :span="24"><h2 class="title">智慧园区-登录</h2></el-col>
          <el-col :span="24">
            <el-form class="demo-ruleForm">
              <el-form-item label="账号" prop="username">
                <el-input v-model="ruleForm.username" type="text" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" :type=" open ? 'text': 'password'">
                  <template #suffix>
                    <svg-icon :icon-class=" open? 'eye-open': 'eye' " style="cursor:pointer;user-select:none;" @click.native="open=!open" />
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="JiZhu">记住密码</el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
              </el-form-item>
            </el-form>
            <div class="tips">
              仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        username: 'demo',
        password: 'zh@hm#23'
      },
      open: false, // 查看密码
      JiZhu: true // 记住密码
    }
  },
  methods: {
    async login() {
      try {
        await this.$store.dispatch('user/login', this.ruleForm)
        this.$message.success('登录成功') // 提示成功
        // this.$router.push('/workbench')
        this.$router.push('/propety/cost')
      } catch (e) {
        console.log(e)
        this.$message.error('用户名或密码错误')
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.box{
  display: flex;
  justify-content: space-between;
}
.left{
  width: 60vw;
  height: 100vh;
  background: url('~@/assets/login-bg-e4ea539c.svg') no-repeat;
  background-position:right top;
  background-size:cover;
  border-radius: 0px 30px 0px 0px;
}

.right{
  width: 40vw;
  display: flex;
  justify-content: center;
  .f{
    padding-top: 20vh;
    width: 50%;
    // background-color: red;
    margin: 0 auto;
    height: 600px;

    .title{
      font-size:1.8em;
      font-weight: 400;
      padding:0px 0px 65px 0px
    }

    .tips{
      color:red;
    }
  }
}

::v-deep .el-input__inner{
  height:32px;
}

::v-deep .el-button--primary{
  width:100%;
  height: 32px;
}
</style>
